<template>
	<view class="content">
		
		<u-navbar
			title="会员卡"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="#D92200"
			:autoBack="true"
		>
		</u-navbar>
		
		<!-- 导航切换 -->
		<u-tabs 
			lineColor="#C61500"
			:list="tab_list"
			@click="tab_click"
			:current="current"
		 >
		</u-tabs>
		
		<view style="margin-top: 20upx;"></view>
		
		<view v-for="(data, index) in vip_list" :key="index">
			
			<view class="car_box" @click="duihuangshow = true">
				<view class="chengka_img_box">
					<image class="chengka_img" :src="chenzhanka_Img_a"></image>
					
					<view class="text_box_pos">
						<view class="displays">
							<view class="text_rig_box">
								<view class="text_upx">
									<view class="text_cheng">{{data.name}}</view>
									<view class="text_cheng1">Growth card</view>
								</view>
								
								<view class="text_shixiao">实效：3个月</view>
							</view>
							
							<view class="le_box">
								<view class="riu">去激活</view>
								<view class="le_bot_ytx">激活可使用会员权益</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="car_box" @click="duihuangshow = true" style="display: none;">
			<view class="chengka_img_box">
				<image class="chengka_img" :src="chenzhanka_Img_b"></image>
				
				<view class="text_box_pos">
					<view class="displays">
						<view class="text_rig_box">
							<view class="text_upx">
								<view class="text_cheng" style="color: #fff;">成长卡</view>
								<view class="text_cheng1"style="color: #fff;">Growth card</view>
							</view>
							
							<view class="text_shixiao" style="color: #fff; border: 1upx solid #fff;">实效：1个月</view>
						</view>
						
						<view class="le_box">
							<view class="riu" style="color: #3CB6FF;background: #fff;">去激活</view>
							<view class="le_bot_ytx" style="color: #fff;">激活可使用计划服务</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<!-- 兑换卡输入-底部弹窗 -->
		<u-popup 
			:show="duihuangshow" 
			@close="close" 
			@open="open"
			:closeable="true"
		>
			<view style="height: 540upx;">
				<view class="text_centet_box">
					<view class="text_centet">兑换码</view>
				</view>
				<view class="text_inpu_box">
					<view class="input_title">1加1等于几？</view>
					<view class="input_box">
						<input class="input_duih" placeholder-class="inpu_plac" placeholder="请输入兑换码"/>
					</view>
				</view>
				
				<view class="quedin_button" @click="showModal">确认使用</view>
			</view>
		</u-popup>
		
		
		<!-- 确认激活模态弹窗 -->
		<template>
			<view class="">
				<u-modal 
					:show="modelshow" 
					:content="content" 
					@confirm="confirm" 
					@cancel="cancel"
					ref="uModal" 
					:asyncClose="true"
					:showCancelButton="true"
					:closeOnClickOverlay="true"
				>
					<view>{{content}}</view>
				</u-modal>
			</view>
		</template>
		
		
	</view>
</template>

<script>
	//引入request.js
	import {
		Request
	} from '@/utils/request.js';
	import api from "@/utils/api.js";
	export default{
		data(){
			return{
				modelshow: false,		// 激活的模态弹窗
				content: '你确定要加入紫菜小店会员吗？',			// 模态弹窗的文本内容
				duihuangshow: false,	// 底部弹出兑换成长卡输入
				current:0,	//导航栏切换
				chenzhanka_Img_a: [], // 成长卡图片 三个月
				chenzhanka_Img_b: [], // 成长卡图片 一个月
				tab_list:[{
					name: "可使用",
				},{
					name: '不可使用',
				}],
				vip_list: [{//会员卡列表
					'id': 1,
					'name': '银卡',
				}],
			}
		},
		onLoad() {
			let that = this;
			uni.request({
				url: api.vipListUrl.route,//会员列表接口
				method: 'GET',
				success: (res) => {
					
				}
			});
		},
		methods:{
			open() {
			  // console.log('open');
			},
			close() {
			  this.duihuangshow = false
			  // console.log('close');
			},
			tab_click(e){
				this.current = e.index;
			},
			leftClick(e){
				console.log(e)
				uni.navigateBack({
					delta:1
				})
			},
			showModal() {
				this.modelshow = true;
			},
			confirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					this.modelshow = false;
				}, 100)
			},
			cancel(){
				setTimeout(() => {
					// 3秒后自动关闭
					this.modelshow = false;
				}, 1)
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		overflow-x: hidden;
	}
	.car_box{
		margin-left: 27upx;
		width: 696upx;
		height: 342upx;
		position: relative;
		margin-bottom: 24upx;
	}
	.chengka_img_box{
		width: 696upx;
		height: 342upx;
	}
	.chengka_img{
		width: 696upx;
		height: 342upx;
		background-color: #3B4145;
	}
	.text_box_pos{
		position: absolute;
		top: 76upx;
		left: 42upx;
		width: 620upx;
		height: 251upx;
		/* background-color: #14A1FF; */
	}
	.displays{
		display: flex;
		justify-content: space-between;
	}
	.text_rig_box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 240upx;
	}
	.text_upx{
		display: flex;
		flex-direction: column;
	}
	.text_cheng{
		/* width: 192upx; */
		/* height: 100upx; */
		font-size: 64upx;
		font-family: OPPOSans-B, OPPOSans;
		font-weight: normal;
		color: #FFE0C7;
		/* line-height: 100upx; */
		text-align: center;
	}
	.text_cheng1{
		font-size: 22upx;
		font-family: OPPOSans-R, OPPOSans;
		font-weight: normal;
		color: #FFE0C7;
		letter-spacing: 2upx;
		text-transform: Uppercase;
	}
	.text_shixiao{
		width: 156upx;
		height: 40upx;
		border: 2upx solid #FFE0C7;
		
		font-size: 24upx;
		font-family: OPPOSans-M, OPPOSans;
		font-weight: normal;
		color: #EACEB8;
		/* line-height: 32upx; */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.le_box{
		margin-top: 78upx;
	}
	.riu{
		width: 216upx;
		height: 76upx;
		background: linear-gradient(47deg, #FFD4AE 0%, #FFDEC4 100%);
		border-radius: 44upx;
		

		font-size: 36upx;
		font-family: OPPOSans-B, OPPOSans;
		font-weight: normal;
		color: #3B4145;
		/* line-height: 58px; */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.le_bot_ytx{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFE0C7;
		line-height: 34upx;
		margin-top: 48upx;
		text-align: center;
	}
	.text_centet_box{
		display: flex;
		justify-content: center;
		/* margin-top: 30upx; */
		padding: 30upx 58upx 0 58upx;
		box-sizing: border-box;
		/* background-color: #14A1FF; */
	}
	.text_centet{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.input_title{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.text_inpu_box{
		margin-left: 58upx;
		margin-top: 24upx;
		width: 636upx;
		height: 154upx;
	}
	.input_box{
		width: 636upx;
		height: 90upx;
		background: #F0F0F0;
		border-radius: 6upx;
		/* padding: 26upx 0 26upx 28upx; */
		padding-left: 28upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		margin-top: 24upx;
		font-size: 24upx;
	}
	.inpu_plac{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.input_duih{
		width: 580upx;
	}
	.quedin_button{
		width: 620upx;
		height: 100upx;
		background: #58BCFF;
		border-radius: 52upx;
		
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 145upx;
		margin-left: 66upx;
	}
</style>